<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #mask {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, 0.3);
            top: 0px;
            left: 0px;
        }

        #chuli {
            display: none;
            background-color: rgb(235, 224, 224);
            width: 400px;
            height: 250px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -125px;
            margin-left: -200px;
            text-align: center;
        }

        #close {
            position: absolute;
            right: 0px;
            top: 10px;
            font-size: 20px;
            width: 20px;
            height: 20px;
            background-color: burlywood;
            cursor: pointer;
        }

        td {
            border: 1px solid #1a0f0f;
        }
    </style>
    <script>
        window.onload = function () {
            var k=0;
            //弹出框
            var btn_tj = document.getElementById('btn_tj');
            var chuli = document.getElementById('chuli');
            var mask = document.getElementById('mask');
            var close = document.getElementById('close');
            var sub = document.getElementById('but_sub');
            var tdp=document.getElementById("td");
            close.onclick = function () {
                close_m();
            }
            var tr_tj = document.getElementById("tr_tj");
            btn_tj.addEventListener("click", function () {
                var _th=this;
                this.parentNode.classList.add("ttt_j");
                kkk_m();
                sub.addEventListener("click", function () {
                    var s_id = document.getElementById("sid");
                    var sid = s_id.value;
                    var s_name = document.getElementById("sname");
                    var sname = s_name.value;
                    var s_class = document.getElementById("sclass");
                    var sclass = s_class.value;
                    var jiedian = document.createElement("tr");
                    jiedian.innerHTML = ("<td>" + sid + "</td><td>" + sname + "</td><td>" + sclass + "</td><td id='btn_bj'>编辑</td>");
                    var tttj= document.getElementsByClassName("ttt_j")[0];
                    tr_tj.parentElement.insertBefore(jiedian, tttj);
                    _th.parentNode.classList.remove("ttt_j");
                    if(tr_tj.nextSibling!=null){
                        tr_tj.parentElement.removeChild(tr_tj.nextSibling);
                    }
                    // s_id.value = "";
                    // s_name.value = "";
                    // s_class.value = "";
                    close_m();
                })
            });
            console.log(document.getElementsByClassName("btn_bj").length+k)

            for (var i = 0; i <= 2; i++) {
                var bbj = document.getElementsByClassName("btn_bj")[i]; 
               bbj.addEventListener("click", function () {
                    kkk_m();
                    var _this = this.parentNode;
                    sub.onclick = function () {
                        var s_id = document.getElementById("sid");
                        var sid = s_id.value;
                        var s_name = document.getElementById("sname");
                        var sname = s_name.value;
                        var s_class = document.getElementById("sclass");
                        var sclass = s_class.value;
                    console.log(sid)

                        _this.innerHTML = ("<td>" + sid + "</td><td>" + sname + "</td><td>" + sclass + "</td><td id='btn_bj'>编辑</td>");
                        close_m();
                    }
                });
            }
            function close_m() {
                mask.style.display = "none";
                chuli.style.display = "none";
            }
            function kkk_m() {
                mask.style.display = "block";
                chuli.style.display = "block";
            }
        }
    </script>
</head>

<body>
    <table>
        <thead></thead>
        <tbody id="tb">
            <tr>
                <td colspan="4" style="text-align: center;">添加修改</td>
            </tr>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>201801</td>
                <td>安小明</td>
                <td>安卓1801</td>
                <td class="btn_bj">编辑</td>
            </tr>
            <tr>
                <td>201802</td>
                <td>桌小明</td>
                <td>安卓1801</td>
                <td class="btn_bj">编辑</td>
            </tr>
            <tr>
                <td>201803</td>
                <td>好小明</td>
                <td>安卓1801</td>
                <td class="btn_bj">编辑</td>
            </tr>
            <tr id="tr_tj">
                <td></td>
                <td></td>
                <td></td>
                <td class="tj" id="btn_tj">添加</td>
            </tr>
        </tbody>
    </table>
    <div id="mask"></div>
    <div id="chuli">
        <span id="close">x</span>
        <p style="padding-top: 50px;">姓名：<input type="text" placeholder="请填写姓名" id="sname"></p>
        <p>学号：<input type="text" id="sid"></p>

        <p>班级：<input type="text" id="sclass"></p>
        <p style="padding-top: 20px;"><input type="button" value="提交" id="but_sub"></p>
    </div>
</body>

</html>